<template>
  <div>
    <div class="null" v-if="list.length == 0">
      <img src="../../assets/images/images_my_none.png" alt="" class="nullbox">
      <p>没有相关记录</p>
    </div>

    <div class="myaftersale" v-for="(item,index) in list" :key="index" v-else>
      <router-link :to="{name: 'details', query:{productId: item.product_id,orderId:item.id}}">
        <div class="up">
          <p class="num">售后编号：{{item.sn}}</p>
          <p class="state" :class="{'aftersale': item.status == '审核中' || item.status == '已通过，待寄回产品'}">{{item.status}}</p>
        </div>
        <div class="below">
          <img :src="item.img" alt="" class="productImg">
          <div class="content">
            <h6>{{item.name}}</h6>
            <p>申请时间：{{item.time}}</p>
          </div>
          <img src="../../assets/images/right_my_name_big.png" alt="" class="arrows">
        </div>
      </router-link>
    </div>
    <foot page='aftersale'></foot>
    <toast :type="type" v-show="load">{{msg}}</toast>
  </div>
</template>

<script>
import foot from "../public/foot";
import toast from "../loading/loading";

export default {
  components: {
    foot,
    toast
  },
  data() {
    return {
      list: [],
      msg: "加载中",
      type: "loading",
      load: false
    };
  },
  computed: {
    stateAftersale() {
      return this.$store.getters.aftersale;
    }
  },
  created() {
    // this.userLogin();
    this.load = true;
    this.getdata();
    var cookie = document.cookie.split(";");
    var cookies = [];
    for (var i = 0; i < cookie.length; i++) {
      var temp = cookie[i].trim().split("=");
      cookies[temp[0]] = temp[1];
    }
    // console.log(cookies);
    var id = cookies["id"];
    // alert(id);
    if (!id) {
      window.location.href = "http://wztest.wofew.com/api/Main/login";
    }
    if (this.stateAftersale) {
      this.list = this.stateAftersale;
    }
  },
  methods: {
    getdata(userId) {
      var that = this;
      $.ajax({
        type: "get",
        data: { user_id: userId },
        url: `${this.$store.state.globalIp}/api/Main/a_sale_list`,
        dataType: "json",
        success(result) {
          that.load = false;
          that.list = result.data;
          that.$store.commit("setAftersalet", result.data);
        }
      });
    }
    //  userLogin() {
    //   var that = this;
    //   $.ajax({
    //     type: "get",
    //     url: `${this.$store.state.globalIp}/api/Main/login`,
    //     data: {

    //     },
    //     dataType: "json",
    //     success(result) {
    //       if (result.message == "成功") {
    //         var data = result.data;
    //        //在这里得到id
    //        var id=result.data.id;
    //        that.getdata(id);
    //       } else {

    //       }
    //     }
    //   });
    // }
  }
};
</script>

<style scoped>
.null {
  width: 100%;
  height: 100%;
}
.nullbox {
  display: block;
  width: 103px;
  height: 100px;
  margin-top: 160px;
  margin-left: 136px;
}
.null p {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  margin-top: 24px;
  margin-left: 146px;
}

.myaftersale {
  width: 351px;
  /* height: 126px; */
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 12px 12px 0 12px;
}
.up {
  width: 327px;
  height: 42px;
  border-bottom: 1px solid rgba(238, 238, 238, 1);
  margin-left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.up .num {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 17px;
}
.up .state {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 17px;
}

.below {
  /* width: 327px; */
  display: flex;
  align-items: flex-start;
  height: auto;
  padding: 10px;
}
.productImg {
  /* float: left; */
  width: 60px;
  height: 60px;
  /* background-color: lavender; */
  margin: 12px;
}
.content {
  width: 200px;
  /* float: left; */
  flex: 1;
}
h6 {
  font-size: 14px;
  font-family: PingFangSC-Medium;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin-top: 20px;
}
p {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
  line-height: 20px;
}
.arrows {
  /* float: right; */
  width: 10px;
  height: 18px;
  margin-top: 35px;
}
.aftersale {
  color: #ff5d20 !important;
}
</style>
